<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账号注册页面</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .all {
            width: 300px;
            height: 380px;
            border: 1px solid #333333;
            text-align: center;
        }
        
        h2 {
            text-align: center;
            margin-top: 30px;
            margin-bottom: 30px;
        }
        
        p {
            width: 100%;
            height: 50px;
            margin-bottom: 15px;
        }
        
        input {
            width: 90%;
            height: 40px;
            outline: none;
            line-height: 40px;
        }
        
        button {
            width: 90%;
            height: 40px;
            background-color: rgba(48, 112, 231, 0.7);
            border: none;
            border-radius: 10px;
            color: #ffffff;
            font-size: 20px;
            transition: all .5s;
        }
        
        button:hover {
            background-color: rgba(48, 112, 231);
        }
        
        a {
            text-decoration: none;
            color: rgb(78, 129, 223, .6);
            transition: all .5s;
        }
        
        a:hover {
            color: rgb(78, 129, 223);
        }
        
        .right,
        .wrong {
            display: block;
        }
        
        .right {
            color: darkgreen;
        }
        
        .wrong {
            color: darkred;
        }
        
        .zhu {
            font-size: 14px;
            color: brown;
        }
    </style>
</head>

<body>
    <div class="all">
        <h2>账号注册</h2>
        <p>
            <input type="text" placeholder="请输入您的用户名" id="username"><span></span>
        </p>
        <p>
            <input type="password" placeholder="请输入您的密码" id="password"><span></span>
        </p>
        <p>
            <input type="password" placeholder="请再次输入您的密码" id="repassword"><span></span>
        </p>
        <p>
            <button id="goregister">注&nbsp;&nbsp;册</button>
        </p>
        <p>
            <a href="login.html">登录账号</a>
        </p>
    </div>
    <div class="zhu">
        注：<br> 1.用户名必须是一位及以上的数字和字母组成。
        <br> 2.密码必须由三位及以上的数字字母下划线组成。
    </div>
</body>

</html>

<script src="jquery.min.js"></script>

<script>
    let regName = /^[0-9A-Za-z]+$/;
    let regWord = /^\w{3,}$/;
    $("#username").blur(function() {
        if (regName.test($(this).val())) {
            this.nextElementSibling.innerHTML = "√";
            this.nextElementSibling.className = "right";
        } else {
            this.nextElementSibling.innerHTML = "请重新输入您的用户名";
            this.nextElementSibling.className = "wrong";
        }
    })

    $("#password").blur(function() {
        if (regWord.test($(this).val())) {
            this.nextElementSibling.innerHTML = "√";
            this.nextElementSibling.className = "right";
        } else {
            this.nextElementSibling.innerHTML = "请重新输入您的密码";
            this.nextElementSibling.className = "wrong";
        }
    })

    $("#repassword").blur(function() {
        if ($("#password").val() === $(this).val() && $(this).val() !== "") {
            this.nextElementSibling.innerHTML = "√";
            this.nextElementSibling.className = "right";
        } else {
            this.nextElementSibling.innerHTML = "密码输入不一致，请重新输入";
            this.nextElementSibling.className = "wrong";
        }
    })


    $("#goregister").click(function() {
        if (regName.test($("#username").val()) && regWord.test($("#password").val()) && $("#password").val() === $("#repassword").val()) {
            // console.log(1);
            let uname = $("#username").val();
            let pwd = $("#password").val();
            $.ajax({
                url: "http://10.35.164.244:8080/goRegister",
                data: {
                    username: uname,
                    password: pwd
                },
                success(data) {
                    if (data === "success") {
                        alert("注册成功！请前往登录页面进行登录")
                        location.href = "http://10.35.164.244/subLocalStorage/login.html";
                    }
                    if (data === "exist") {
                        alert("注册失败！该用户名已被注册，请重新进行注册")
                        history.go(0);
                    }

                }
            })

        }
    })
</script>